<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col group_2">
      <view class="fun-flex-row fun-justify-between fun-items-center section">
        <text class="font_2">Amount（$）</text>
        <text class="text_3">$10,000.00</text>
      </view>
      <view class="fun-flex-col list">
        <view class="fun-flex-col fun-mt-20 section_2 list-item" v-for="(item, index) in items" :key="index">
          <view class="fun-flex-row fun-justify-between group_3">
            <text class="font_2 text_4">Type of transaction</text>
            <text class="font_3 text_5">Top-Up</text>
          </view>
          <view class="divider"></view>
          <view class="fun-flex-row fun-justify-between group_4">
            <text class="font_4 text_6">Transaction Fee</text>
            <text class="font_3 text_7">$30.00</text>
          </view>
          <view class="divider_2"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center group_5">
            <text class="font_4">Method</text>
            <view class="fun-flex-row group_6">
              <text class="font text_8">ETH</text>
              <text class="font text_9 ml-7">-Transfer</text>
            </view>
          </view>
          <view class="divider_2"></view>
          <view class="fun-flex-row fun-justify-between fun-items-center group_4">
            <text class="font_4">Actual Amount</text>
            <view class="fun-flex-row fun-items-baseline">
              <text class="font_5 text_10">2.91</text>
              <text class="font_5">ETH</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fun-flex-col fun-items-center group_14">
      <text class="font_8 text_23">Have questions about the deal?</text>
      <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2 mt-13">
        <text class="text_24">Enquiry</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        items: [null, null],
      };
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .ml-5 {
    margin-left: 10rpx;
  }
  .mt-15 {
    margin-top: 30rpx;
  }
  .ml-7 {
    margin-left: 14rpx;
  }
  .mt-13 {
    margin-top: 26rpx;
  }
  .page {
    padding: 44rpx 32rpx 234rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 36rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 28rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 30rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 30.3rpx;
      }
    }
    .image_4 {
      width: 48rpx;
      height: 48rpx;
    }
    .font {
      font-size: 30rpx;
      font-family: SF Pro Display;
      line-height: 21.48rpx;
      font-weight: 300;
      color: #ffffff;
    }
    .text_2 {
      font-size: 32rpx;
      line-height: 22.82rpx;
    }
    .group_2 {
      margin-top: 44rpx;
      .section {
        padding: 52rpx 16rpx 40rpx 32rpx;
        background-color: #1b1d53;
        border-radius: 14rpx;
        .text_3 {
          color: #ffffff;
          font-size: 56rpx;
          font-family: SF Pro Display;
          font-weight: 700;
          line-height: 52.04rpx;
        }
      }
      .list {
        padding-top: 38rpx;
        .section_2 {
          padding-left: 32rpx;
          padding-right: 4rpx;
          background-color: #1b1d53;
          border-radius: 14rpx;
          .group_3 {
            padding: 36rpx 0;
            .text_4 {
              line-height: 28.04rpx;
            }
            .text_5 {
              margin-right: 24rpx;
              line-height: 26.18rpx;
            }
          }
          .divider {
            margin-right: 24rpx;
            background-color: #ffffff24;
            height: 2rpx;
          }
          .group_4 {
            padding: 32rpx 0;
            .text_6 {
              line-height: 22.56rpx;
            }
            .text_7 {
              margin-right: 24rpx;
            }
            .font_5 {
              font-size: 48rpx;
              font-family: SF Pro Display;
              line-height: 33.82rpx;
              font-weight: 700;
              color: #ffffff;
            }
            .text_10 {
              line-height: 35.34rpx;
            }
          }
          .font_3 {
            font-size: 30rpx;
            font-family: SF Pro Display;
            line-height: 25.58rpx;
            font-weight: 300;
            color: #ffffff;
          }
          .divider_2 {
            margin-right: 28rpx;
            background-color: #b0b1bf24;
            height: 2rpx;
          }
          .group_5 {
            padding: 40rpx 0 32rpx;
            .group_6 {
              margin-right: 24rpx;
              .text_8 {
                line-height: 21.14rpx;
              }
              .text_9 {
                line-height: 21.42rpx;
              }
            }
          }
          .font_4 {
            font-size: 30rpx;
            font-family: SF Pro Display;
            line-height: 21.48rpx;
            font-weight: 700;
            color: #ffffff;
          }
        }
        .list-item {
          &:first-child {
            margin-top: 0;
          }
        }
      }
      .font_2 {
        font-size: 30rpx;
        font-family: SF Pro Display;
        line-height: 28.82rpx;
        font-weight: 700;
        color: #ffffff;
      }
    }
    .group_14 {
      margin-top: 96rpx;
      .font_8 {
        font-size: 26rpx;
        font-family: SF Pro Display;
        font-weight: 300;
        color: #7f819d;
      }
      .text_23 {
        line-height: 22.86rpx;
      }
      .text-wrapper_2 {
        padding: 12rpx 0;
        background-color: #ffffff33;
        border-radius: 24rpx;
        width: 172rpx;
        border-left: solid 2rpx #ffffff1a;
        border-right: solid 2rpx #ffffff1a;
        border-top: solid 2rpx #ffffff1a;
        border-bottom: solid 2rpx #ffffff1a;
        .text_24 {
          color: #ffffff;
          font-size: 22rpx;
          font-family: SF Pro Display;
          font-weight: 300;
          line-height: 19.54rpx;
        }
      }
    }
  }
</style>